<!-- 文件列表表头排序图标 license by http://eleadmin.com -->
<template>
  <i :class="classes">
    <i class="ele-border-primary"></i>
    <i class="ele-border-primary"></i>
  </i>
</template>

<script>
  export default {
    name: 'EleFileSort',
    props: {
      // 当前排序字段
      sort: String,
      // 当前排序方式
      order: String,
      // 排序字段名称
      name: {
        type: String,
        required: true
      }
    },
    computed: {
      classes() {
        return [
          'ele-file-list-table-item-sort',
          {
            'ele-file-list-sort-asc':
              this.name === this.sort && 'asc' === this.order
          },
          {
            'ele-file-list-sort-desc':
              this.name === this.sort && 'desc' === this.order
          }
        ];
      }
    }
  };
</script>

<style lang="scss">
  // 文件列表表头排序图标
  .ele-file-list-table-item-sort {
    width: 8px;
    height: 14px;
    margin-left: 6px;
    position: relative;
    display: inline-block;

    & > i {
      width: 0;
      height: 0;
      border-width: 4px;
      border-style: solid;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      display: block;

      &:first-child {
        border-top-color: transparent !important;
        margin: -4px 0 4px 0;
      }

      &:last-child {
        border-bottom-color: transparent !important;
      }
    }

    &:not(.ele-file-list-sort-asc) > i:first-child {
      border-bottom-color: hsla(0, 0%, 60%, 0.6) !important;
    }

    &:not(.ele-file-list-sort-desc) > i:last-child {
      border-top-color: hsla(0, 0%, 60%, 0.6) !important;
    }
  }
</style>
